<template>
<div> 
<home-header></home-header>
<Home-Swiper :list="swiperList"></Home-Swiper>
<Home-Icons :icon="iconList"></Home-Icons>
<Home-Recommend :recommend="recommendList"></Home-Recommend>
 <Home-weekend :weekendList="weekList"></Home-weekend>
</div>

</template>
<script>
  import HomeHeader from './components/header'
  import HomeSwiper from './components/swiper'
   import HomeIcons from './components/icons'
   import HomeRecommend from './components/recommend'
   import HomeWeekend from "./components/Weekend"
   import axios from "axios"
  export default{
     name:"home",
     components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
       HomeRecommend,
       HomeWeekend
     },
     data(){
        return {
           lastCity:'',
           swiperList:[],
           iconList:[],
           recommendList:[],
           weekList:[]
        }
     },
     methods:{
        getHomeInfo(){
           axios.get("static/mock/index.json?city="+this.city)
           .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res){
           res=res.data
           if(res.ret&&res.data){
              const data=res.data
             this.swiperList=data.swiperList
              this.iconList=data.iconList
              this.recommendList=data.recommendList
              this.weekList=data.weekendList
           }
        }
     },
     mounted(){
       this.lastCity=this.city
        this.getHomeInfo()
     },
     activated (){
        if(this.lastCity !== this.city){
           this.lastCity=this.city
            this.getHomeInfo()
        }
     }

  }
</script>
<style >

</style>
